<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				bor der: 1px solid red;
				fl oat: left;
				font-size: 16px;/* 页面文字默认大小:16px */
				line-height: 20px;
				/* 20px;浮动p块元素,内容行内元素 */
				/* 结论:文本不能浮动,特点:块包行*/
				}
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/太1.png" alt="太乙" width="200px" height="200px"/>
		<img src="img/太1.png" alt="太乙" width="200px" height="200px"/>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio maiores dicta earum necessitatibus! Consectetur quos laborum libero nam quae aliquam, magni nihil accusantium voluptas pariatur esse, culpa ipsum rem provident. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci placeat aut, vel, harum molestias doloribus quaerat temporibus eaque id odit labore, culpa ea quo voluptatibus pariatur maxime vitae officia provident! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit temporibus, quasi officiis voluptas magnam in excepturi illo distinctio quaerat quam cumque obcaecati dolorem itaque ab asperiores necessitatibus ex, enim nesciunt!</p>
	
	</body>
</html>